/*
 * @Description: 全屏加载中组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-29 09:56:52
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-29 13:54:43
 */
<template>
  <div
    class="loading_main fontsize32"
    :style="loading.myStyle"
    v-if="state"
  >
    <div class="loading_area">
      <div class="loading_icon">
        <i
          class="iconfont fontsize48"
          :class="loading.icon"
        ></i>
      </div>
      <div class="loading_text">{{loading.text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    loadingType: {
      type: String,
      default: 'loading'
    },
    state: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    loadingType: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        this.loading = this.loadingState[newVal || 'loading']
      }
    }
  },
  data() {
    return {
      loading: {
        icon: 'icon-loading',
        text: '页面加载中，请稍后...',
        myStyle: {
          backgroundColor: '#f2f5f6',
          color: '#999'
        }
      },
      loadingState: {
        loading: {
          icon: 'icon-loading',
          text: '页面加载中，请稍后...',
          myStyle: {
            backgroundColor: '#f2f5f6',
            color: '#999'
          }
        },
        fail: {
          icon: 'icon-warn',
          text: '页面加载失败',
          myStyle: {
            backgroundColor: '#f2f5f6',
            color: '#999'
          }
        },
        lockSeat: {
          icon: 'icon-loading',
          text: '正在锁定您的座位，请稍等...',
          myStyle: {
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            color: '#fff'
          }
        },
        lockSeatFail: {
          icon: 'icon-warn',
          text: '座位锁定失败，请稍后重试',
          myStyle: {
            backgroundColor: '#f2f5f6',
            color: '#999'
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.loading_main {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  .loading_area {
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    .loading_icon {
      width: 96px;
      height: 96px;
      line-height: 96px;
      margin: auto;
      .icon-loading {
        animation: loading 1s infinite;
        display: block;
      }
    }
  }
}
@keyframes loading {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
